<template>
  <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-50 p-4">
    <el-card class="w-full max-w-md shadow-xl overflow-hidden">
      <div class="bg-indigo-600 text-white p-6 text-center">
        <el-icon class="w-12 h-12 mx-auto mb-2"><User /></el-icon>
        <h2 class="text-2xl font-bold">用户注册</h2>
        <p class="text-indigo-100 mt-1">创建您的课程学习平台账号</p>
      </div>
      
      <el-form
        ref="registerFormRef"
        :model="form"
        :rules="registerRules"
        class="p-6 space-y-3"
      >
        <el-form-item label="用户名/学号" prop="username">
          <el-input
            v-model="form.username"
            placeholder="请输入学号"
            :prefix-icon="UserFilled"
            clearable
          />
        </el-form-item>
        
        <el-form-item label="密码" prop="pwd">
          <el-input
            v-model="form.pwd"
            type="password"
            placeholder="请输入密码"
            :prefix-icon="Lock"
            show-password
          />
        </el-form-item>
        
        <el-form-item label="真实姓名" prop="realName">
          <el-input
            v-model="form.realName"
            placeholder="请输入真实姓名"
            :prefix-icon="UserFilled"
            clearable
          />
        </el-form-item>
        
        <el-form-item label="学号" prop="stuNum">
          <el-input
            v-model="form.stuNum"
            placeholder="请输入学号"
            :prefix-icon="Document"
            clearable
          />
        </el-form-item>
        
        <el-form-item label="班级" prop="className">
          <el-input
            v-model="form.className"
            placeholder="请输入班级"
            :prefix-icon="School"
            clearable
          />
        </el-form-item>
        
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="form.email"
            type="email"
            placeholder="请输入邮箱"
            :prefix-icon="Message"
            clearable
          />
        </el-form-item>
        
        <el-form-item label="年龄" prop="age">
          <el-input
            v-model.number="form.age"
            type="number"
            min="1"
            placeholder="请输入年龄"
            :prefix-icon="Key"
            clearable
          />
        </el-form-item>
        
        <el-form-item>
          <el-button
            type="primary"
            size="large"
            class="w-full"
            :loading="loading"
            @click="handleReg"
          >
            注册
          </el-button>
        </el-form-item>
      </el-form>

      <div class="bg-gray-50 p-4 text-center">
        <el-link type="default" :underline="false">
          已有账号? 
          <router-link to="/login" class="text-blue-600 font-medium">立即登录</router-link>
        </el-link>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '../store/auth';
import { User, UserFilled, Lock, Document, School, Message, Key } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

const router = useRouter();
const auth = useAuthStore();
const registerFormRef = ref();
const loading = ref(false);

const form = reactive({
  username: '23002943',
  pwd: '123456',
  realName: '来爽',
  stuNum: '23002943',
  className: '23软件技术2班',
  email: 'dmsl95@qq.com',
  age: 21,
});

// 表单验证规则
const registerRules = {
  username: [
    { required: true, message: '请输入用户名/学号', trigger: 'blur' },
    { min: 4, max: 20, message: '用户名长度在 4 到 20 个字符之间', trigger: 'blur' }
  ],
  pwd: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符之间', trigger: 'blur' }
  ],
  realName: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '姓名长度在 2 到 20 个字符之间', trigger: 'blur' }
  ],
  stuNum: [
    { required: true, message: '请输入学号', trigger: 'blur' },
    { min: 4, max: 20, message: '学号长度在 4 到 20 个字符之间', trigger: 'blur' }
  ],
  className: [
    { required: true, message: '请输入班级', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' },
    { type: 'number', min: 1, max: 120, message: '年龄必须在 1 到 120 之间', trigger: 'blur' }
  ]
};

const handleReg = async () => {
  try {
    await registerFormRef.value.validate();
    loading.value = true;
    
    await auth.register(form);
    ElMessage.success('注册成功，正在跳转到登录页面...');
    setTimeout(() => router.push('/login'), 1500);
  } catch (error) {
    if (error.name !== 'validate') {
      ElMessage.error('注册失败，请稍后重试');
    }
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
:deep(.el-form-item) {
  margin-bottom: 16px;
}

:deep(.el-card__body) {
  padding: 0;
}

:deep(.el-input__inner) {
  border-radius: 8px;
}
</style>